import * as d3 from 'd3'
export class Relative {
  chart = {}
  constructor(divId) {
    this.divId = divId
  }
  draw(rela) {
    var fullAngle = 2 * Math.PI
    var InterAngle = Math.PI * 1 / 36
    var ArcAngele = Math.PI * 1 / 18
    var colors = d3.scaleOrdinal(d3.schemeCategory10)
    var innerR = 38
    var outR = 42
    var Radi = 37
    this.chart.divHeight = document.getElementById(this.divId).offsetHeight
    this.chart.divWidth = document.getElementById(this.divId).offsetWidth
    for (var i = 0; i < 14; i++) {
      this.chart.svg = d3.select('#' + this.divId).append('svg')
        .attr('width', this.chart.divWidth / 2)
        .attr('height', this.chart.divHeight / 7)
        .attr('class', 'svg_chart')
      this.renderPie(this.chart.svg, fullAngle, InterAngle, ArcAngele, colors, innerR, outR, Radi)
      this.renderWheel(this.chart.svg, fullAngle, InterAngle, ArcAngele, colors, innerR, outR, Radi)
      this.renderPots(this.chart.svg, fullAngle, InterAngle, ArcAngele, colors, innerR, outR, Radi)
    }
  }
  renderPie(svg, fullAngle, InterAngle, ArcAngele, colors, innerR, outR, Radi) {
    var data = [{
      startAngle: 0 * ArcAngele + InterAngle,
      endAngle: 1 * ArcAngele + InterAngle
    },
    {
      startAngle: 1 * ArcAngele + InterAngle,
      endAngle: 2 * ArcAngele + InterAngle
    },
    {
      startAngle: 2 * ArcAngele + InterAngle,
      endAngle: 3 * ArcAngele + InterAngle
    },
    {
      startAngle: 3 * ArcAngele + InterAngle,
      endAngle: 4 * ArcAngele + InterAngle
    },
    {
      startAngle: 4 * ArcAngele + InterAngle,
      endAngle: 5 * ArcAngele + InterAngle
    },
    {
      startAngle: 5 * ArcAngele + 3 * InterAngle,
      endAngle: 6 * ArcAngele + 3 * InterAngle
    },
    {
      startAngle: 6 * ArcAngele + 3 * InterAngle,
      endAngle: 7 * ArcAngele + 3 * InterAngle
    },
    {
      startAngle: 7 * ArcAngele + 3 * InterAngle,
      endAngle: 8 * ArcAngele + 3 * InterAngle
    },
    {
      startAngle: 8 * ArcAngele + 3 * InterAngle,
      endAngle: 9 * ArcAngele + 3 * InterAngle
    },
    {
      startAngle: 9 * ArcAngele + 3 * InterAngle,
      endAngle: 10 * ArcAngele + 3 * InterAngle
    },
    {
      startAngle: 10 * ArcAngele + 5 * InterAngle,
      endAngle: 11 * ArcAngele + 5 * InterAngle
    },
    {
      startAngle: 11 * ArcAngele + 5 * InterAngle,
      endAngle: 12 * ArcAngele + 5 * InterAngle
    },
    {
      startAngle: 12 * ArcAngele + 5 * InterAngle,
      endAngle: 13 * ArcAngele + 5 * InterAngle
    },
    {
      startAngle: 13 * ArcAngele + 5 * InterAngle,
      endAngle: 14 * ArcAngele + 5 * InterAngle
    },
    {
      startAngle: 14 * ArcAngele + 5 * InterAngle,
      endAngle: 15 * ArcAngele + 5 * InterAngle
    },
    {
      startAngle: 15 * ArcAngele + 7 * InterAngle,
      endAngle: 16 * ArcAngele + 7 * InterAngle
    },
    {
      startAngle: 16 * ArcAngele + 7 * InterAngle,
      endAngle: 17 * ArcAngele + 7 * InterAngle
    },
    {
      startAngle: 17 * ArcAngele + 7 * InterAngle,
      endAngle: 18 * ArcAngele + 7 * InterAngle
    },
    {
      startAngle: 18 * ArcAngele + 7 * InterAngle,
      endAngle: 19 * ArcAngele + 7 * InterAngle
    },
    {
      startAngle: 19 * ArcAngele + 7 * InterAngle,
      endAngle: 20 * ArcAngele + 7 * InterAngle
    },
    {
      startAngle: 20 * ArcAngele + 9 * InterAngle,
      endAngle: 21 * ArcAngele + 9 * InterAngle
    },
    {
      startAngle: 21 * ArcAngele + 9 * InterAngle,
      endAngle: 22 * ArcAngele + 9 * InterAngle
    },
    {
      startAngle: 22 * ArcAngele + 9 * InterAngle,
      endAngle: 23 * ArcAngele + 9 * InterAngle
    },
    {
      startAngle: 23 * ArcAngele + 9 * InterAngle,
      endAngle: 24 * ArcAngele + 9 * InterAngle
    },
    {
      startAngle: 24 * ArcAngele + 9 * InterAngle,
      endAngle: 25 * ArcAngele + 9 * InterAngle
    },
    {
      startAngle: 25 * ArcAngele + 11 * InterAngle,
      endAngle: 26 * ArcAngele + 11 * InterAngle
    },
    {
      startAngle: 26 * ArcAngele + 11 * InterAngle,
      endAngle: 27 * ArcAngele + 11 * InterAngle
    },
    {
      startAngle: 27 * ArcAngele + 11 * InterAngle,
      endAngle: 28 * ArcAngele + 11 * InterAngle
    },
    {
      startAngle: 28 * ArcAngele + 11 * InterAngle,
      endAngle: 29 * ArcAngele + 11 * InterAngle
    },
    {
      startAngle: 29 * ArcAngele + 11 * InterAngle,
      endAngle: 30 * ArcAngele + 11 * InterAngle
    }
    ]

    var arc = d3.arc().outerRadius(outR)
      .innerRadius(innerR)

    svg.append('g')
      .attr('transform', 'translate(' + (outR + 20) + ',' + outR + ')')
      .selectAll('path.arc')
      .data(data)
      .enter()
      .append('path')
      .attr('class', 'arc')
      .attr('fill', function(d, i) {
        return colors(i)
      })
      .attr('d', function(d, i) {
        return arc(d, i)
      })
  }
  renderWheel(svg, fullAngle, InterAngle, ArcAngele, colors, innerR, outR, Radi) {
    var line = d3.lineRadial()
      .radius(function(d, i) {
        if (i === 0) return 0
        return Radi
      })
      .angle(function(d) {
        return d * (Math.PI / 180)
      })
    var data = [
      [0, 30, 90],
      [0, 90, 150],
      [0, 150, 210],
      [0, 210, 270],
      [0, 270, 330],
      [0, 330, 30],
      [0, 30]
    ]

    // 线段
    data.forEach(function(d, i) {
      svg.append('path')
        .datum(d)
        .attr('d', line)
        .attr('stroke', 'black')
        .attr('stroke-width', 1)
        .attr('fill', 'white')
        .attr('transform', 'translate(' + (outR + 20) + ',' + outR + ')')
    })
  }
  renderPots(svg, fullAngle, InterAngle, ArcAngele, colors, innerR, outR, Radi) {
    var angle = d3.scaleLinear()
      .domain([0, 6])
      .range([0, 2 * Math.PI])

    var r = d3.scaleLinear()
      .domain([0, 1])
      .range([0, Radi])

    var line = d3.lineRadial()
      .angle(function(d) {
        return angle(d[0])
      })
      .radius(function(d) {
        return r(d[1])
      })

    var data = [
      [Math.random() * 6, Math.random()],
      [Math.random() * 6, Math.random()],
      [Math.random() * 6, Math.random()],
      [Math.random() * 6, Math.random()],
      [Math.random() * 6, Math.random()],
      [Math.random() * 6, Math.random()],
      [Math.random() * 6, Math.random()],
      [Math.random() * 6, Math.random()],
      [Math.random() * 6, Math.random()],
      [Math.random() * 6, Math.random()]
    ]
    // 散点
    svg.append('g')
      .attr('transform', 'translate(' + (outR + 20) + ',' + outR + ')')
      .selectAll('point')
      .data(data)
      .enter()
      .append('circle')
      .attr('class', 'point')
      .attr('transform', function(d) {
        var coors = line([d]).slice(1).slice(0, -1)
        return 'translate(' + coors + ')'
      })
      .attr('r', 2)
      .attr('fill', function(d, i) {
        return colors(i)
      })
  }
}
